{% extends "htmlPages/base.html" %}

        {% block head %}
            <script type="text/javascript" src="../static/js/printThis.js"></script>
            <style type="text/css" media="print">
                @page { size: landscape; }
            </style>
            <script type="text/javascript">
                function printList(){
    //                window.print();
                    $('#list').printThis();
                    console.log('should print');
                }
            </script>
        {% endblock head %}

        {% block side_navbar %}
           <ul class="nav navbar-nav side-nav">
            <li>
              <a href="/home"><i class="fa fa-desktop"></i>  דף בית </a>
            </li>
            <li>
              <a href="/messages"><i class="fa fa-bullhorn"></i>  לוח מודעות </a>
            </li>
            <li>
              <a href="/privateMessages"><i class="fa fa-edit"></i>  הודעות אישיות </a>
            </li>
            <li class="active">
              <a><i href="" class="fa fa-file"></i>  דף קשר </a>
            </li>
          </ul>
        {% endblock side_navbar %}

        {% block page_wrapper %}
            <div class="row">
              <div class="col-lg-12">
                  <h1>
דף קשר
                      <small class="hidden-print">{{ date }}</small>
                  </h1>
              </div>
            </div>

            <div class="row" dir="ltr">
                <div class="col-lg-12 pull-left">
                    <p>
                <a class="btn btn-success hidden-print" onclick="printList()">
הדפסת דף הקשר
                <i class="fa fa-print"></i></a>
                    </p>
                </div>
            </div>


            <div class="row" id="list">
              <div class="table-responsive">
                <table class="table table-bordered table-hover table-striped tablesorter">
                    <thead>
                    <tr>
                        <th class="text-right">
שם הילד
                        </th>
                        <th class="text-right">
תאריך לידה
                        </th>
                        <th class="text-right">
                            מין
                        </th>
                        <th class="text-right">
טלפון
                        </th>
                        <th class="text-right">
כתובת
                        </th>
                        <th class="text-right">
שם הורה
                        </th>
                        <th class="text-right">
טלפון הורה
                        </th>
                        <th class="text-right">
דוא"ל הורה
                        </th>
                        <th class="text-right">
שם הורה
                        </th>
                        <th class="text-right">
טלפון הורה
                        </th>
                        <th class="text-right">
דוא"ל הורה
                        </th>
                    </tr>
                    </thead>
                    <tbody>
        {%- for child in children %}
                        <tr>
                            <td>{{ child.first_name }} {{ child.last_name }}</td>
                            <td>{{ child.date_of_birth }}</td>
                            <td align="center">
                                <img src="static/img/{{ child.gender }}.gif" alt="{{ child.child_id }}" style="height: 20px; width: 20px;">
                            </td>
                            <td>{{ child.phone_number }}</td>
                            <td>{{ child.address }}</td>
                            <td>{{ child.parent1_first_name }} {{ child.parent1_last_name }}</td>
                            <td>{{ child.parent1_phone_number }}</td>
                            <td>{{ child.parent1_email_address }}</td>
                            <td>{{ child.parent2_first_name }} {{child.parent2_last_name }}</td>
                            <td>{{ child.parent2_phone_number }}</td>
                            <td>{{ child.parent2_email_address }}</td>
                        </tr>
        {% endfor -%}
                         </tbody>
                      </table>
                    </div>
                  </div>
            </div>
        {% endblock page_wrapper %}